<template>
  <view class="reportdetail_container app_container_page">
    <view class="app_bgwith_wave reportdetail_content">
      <appReportItem :item="studentReportResult" :showUnLock="false" />
      <view class="app_dashed_title">
        <text>{{ studentReportResult.studentName || '' }}的体测数据</text>
      </view>
      <view class="report_eightItem_box">
        <eightItem v-for="item of eightPhysicalList" :item="item" :key="item.physicalName" :showValue="item.physicalValue" />
      </view>
      <view class="app_dashed_title">
        <text>报告解析</text>
      </view>
      <view class="report_analyse">
        将某一年龄时点所获得的某单项体格生长测量 值（如体重）与参照人群值比较，得到该儿童 在同年龄、同性别人群中所处的位置，即为此 儿童该项体格生长指标在此年龄的生长水平。
      </view>
      <view class="content_bottom">
        <view class="app_button" @click="handleGoVedio">查看改善视频</view>
      </view>
    </view>
    <view class="reportdetail_bottom">
      <view class="rd_button collect" :class="[isCollect ? 'unCollect' : 'collect']" @click="handleCollectClick">{{ isCollect ? '取消收藏' : '收藏' }}</view>
      <view class="rd_button save" @click="handleSave">保存</view>
      <button open-type="share" class="rd_button share">分享</button>
      <view class="rd_button row" @click="handleGoEx">查看专家解析报告/解析对比功能</view>
    </view>

    <view class="rightfixed fixed_expert" @click="showPopup = true"></view>
    <view class="rightfixed fixed_vedio" @click="showVideoPopup = true"></view>
    <appPopup class="expert_popup" :show.sync="showPopup">
      <view class="expert_popup_content">
        <view class="expert_item" v-for="expert of expertlist" :key="expert.id">
          <image :src="expert.img"></image>
          <view class="item_right">
            <text class="name">{{ expert.name }}</text>
            <text>{{ expert.education }}/{{ expert.position }}</text>
            <text>{{ expert.intro }}</text>
          </view>
        </view>
      </view>
    </appPopup>

    <appPopup class="helpVideo_popup" :show.sync="showVideoPopup">
      <video class="help_video" show-progress :src="videoUrl"></video>
    </appPopup>
  </view>
</template>

<script>
import { collectProduct, isCollect, cancelCollect } from '@/api/home'
import { getReportDetailStudent, getExpertlist, getHelpVideo, getPoster } from './api'
import appPopup from '@/components/app/app_popup'
import appReportItem from '@/components/app/app_report_item'
import eightItem from './components/eightItem'
import eightPhysical from '@/util/eightPhysical'
import { downImgToAlbum } from '@/util/helper'
export default {
  name: 'reportdetail',
  components: {
    appPopup,
    appReportItem,
    eightItem
  },
  data() {
    const eightPhysicalList = Object.keys(eightPhysical).map((per) => ({
      physicalName: per
    }))
    return {
      id: '',
      showPopup: false,
      expertlist: [],
      // {isUnlock}
      studentReportResult: {},
      //
      eightPhysicalList,
      //
      videoUrl: '',
      showVideoPopup: false,
      //
      isCollect: false
    }
  },
  methods: {
    async initExpertlist() {
      try {
        const res = await getExpertlist()
        if (res.code === 200) {
          this.expertlist = res.data.list
        }
      } catch (error) {
        console.log(error)
      }
    },
    async fetchReportDetail() {
      try {
        // const { data } = await getReportDetail(this.id)
        const { data } = await getReportDetailStudent(this.id)
        // console.log(data)
        const studentReportResult = data.studentReportResult
        const eightPhysicalList = studentReportResult.eightPhysicalList
        delete studentReportResult.eightPhysicalList
        this.studentReportResult = studentReportResult
        this.eightPhysicalList = eightPhysicalList
      } catch (error) {
        console.log(error)
      }
    },
    async fetchHelpVideo() {
      try {
        const res = await getHelpVideo()
        if (res.code === 200) {
          this.videoUrl = res.data[0].lUrl
        }
      } catch (error) {
        console.log(error)
      }
    },
    async fetchIsCollect() {
      try {
        const { data } = await isCollect({
          productId: this.id,
          productType: 3
        })
        this.isCollect = data.isCollect === 1
      } catch (error) {
        console.log(error)
      }
    },
    handleGoVedio() {
      uni.navigateTo({
        url: '/pages/improving/improving'
      })
    },
    handleGoEx() {
      uni.navigateTo({
        url: `/pagesSub/report/exDetail?id=${this.id}`
      })
    },
    async handleCollectClick() {
      const api = this.isCollect ? cancelCollect : collectProduct
      try {
        const res = await api({
          productId: this.id,
          productType: 3
        })
        if (res.code === 200) {
          this.isCollect = !this.isCollect
          uni.showToast({
            icon: 'none',
            title: res.msg
          })
        }
      } catch (error) {
        console.log(error)
      }
    },
    async handleSave() {
      try {
        const res = await getPoster()
        if (res.code === 200) {
          //
          const imgUrl = res.data

          downImgToAlbum(imgUrl)
        }
      } catch (error) {
        console.log(error)
      }
    }
  },
  onShareAppMessage(obj) {
    return {
      // title: '儿童体质小程序',
      imageUrl: '../../static/shareImg.png',
      path: '/pages/home/index'
    }
  },
  onLoad(obj) {
    console.log(obj)
    const { id } = obj
    this.id = id

    this.fetchReportDetail()
    this.fetchHelpVideo()
    this.initExpertlist()
    this.fetchIsCollect()
  }
}
</script>

<style lang="scss">
.reportdetail_container {
  .reportdetail_content {
    padding: 30rpx 30rpx 0;
  }

  .app_dashed_title {
    margin-top: 20rpx;
  }

  .report_eightItem_box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .report_eightItem {
      flex: 0 0 auto;
      margin-top: 30rpx;
    }
  }

  .report_analyse {
    margin-top: 20rpx;
    padding: 60rpx 40rpx 70rpx;
    font-size: 30rpx;
    border-radius: 40rpx;
    @include boxWithDashed(40rpx, #f5af64, 10rpx);
    @include bgStriped($bgColor: #ffff43, $lineColor: #ecec43);
  }

  .content_bottom {
    padding: 45rpx 0 30rpx;
    text-align: center;
  }

  .reportdetail_bottom {
    display: flex;
    flex-flow: wrap;
    justify-content: space-between;
    padding: 60rpx 30rpx 100rpx;

    .rd_button {
      flex: 0 0 200rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100rpx;
      font-size: 30rpx;
      background-color: #5c7dff;
      color: #fff;
      border-radius: 50rpx;
      padding: 0 37rpx 0 80rpx;

      background-size: 50rpx 50rpx;
      background-repeat: no-repeat;
      background-position: 30rpx center;

      &.save {
        background-image: url('#{$BASEURL}/rd_icon_save.png');
      }
      &.share {
        background-image: url('#{$BASEURL}/rd_icon_share.png');
      }
      &.collect {
        background-image: url('#{$BASEURL}/rd_icon_collect.png');
      }
      &.unCollect {
        padding: 0 20rpx 0 60rpx;
        background-position: 10rpx center;
        background-image: url('#{$BASEURL}/cancelCollection-icon.png');
      }

      &.row {
        flex: 1;
        margin-top: 50rpx;
        background-image: url('#{$BASEURL}/go_exReportDetail.png');
        background-size: 80rpx 80rpx;
        background-position: 10rpx center;
        background-repeat: no-repeat;
      }
    }
  }

  .rightfixed {
    position: fixed;
    width: 128rpx;
    height: 130rpx;
    right: 0;
    bottom: 680rpx;

    background-size: contain;

    &.fixed_expert {
      background-image: url('#{$BASEURL}/fixed_expert.png');
    }
    &.fixed_vedio {
      bottom: 530rpx;
      background-image: url('#{$BASEURL}/fixed_vedio.png');
    }
  }

  .expert_popup .expert_popup_content {
    max-height: 540rpx;
    @include canScroll();
  }

  .expert_item {
    display: flex;
    padding: 15rpx 20rpx;
    box-shadow: 0px 10rpx 40rpx 0px rgba(0, 0, 0, 0.1);
    border-radius: 40rpx;
    font-size: 24rpx;
    image {
      width: 100rpx;
      height: 100rpx;
      border: 5rpx solid #0060ff;
      border-radius: 50%;
    }

    .item_right {
      margin-left: 40rpx;
      flex: 1;
    }

    text {
      display: block;
    }
    .name {
      font-size: 30rpx;
    }

    & ~ .expert_item {
      margin-top: 30rpx;
    }
  }

  .helpVideo_popup {
    .help_video {
      height: 360rpx;
      width: 100%;
    }
  }
}
</style>
